

Berta.EditorManager.addPlugin('Select', new Class(function() {
	
	return {
		extend: Berta.Editor,
		pluginName: 'Textline',
		
		// defaults for this particular plugin
		defaults: {
			pluginOptions: {
				options: null,			// array of options
				optionTitles: null		// array of titles
				
				// see defaults.pluginOptions in Berta.Editor class for inherited options
			}
		},
		
		constructor: function(options) {
			// call the parent with pluginName=null
			// Editor defaults get extended by this.defaults and then extended by options
			Berta.Editor.call(this, options);
			
			this.originalValue = this.element.html();
			this.value = this.originalValue;
		},
		
		
		//   .______    __    __  .______    __       __    ______    ////////////////////////////////////////////////////////////
		//   |   _  \  |  |  |  | |   _  \  |  |     |  |  /      |   ////////////////////////////////////////////////////////////
		//   |  |_)  | |  |  |  | |  |_)  | |  |     |  | |  ,----'   ////////////////////////////////////////////////////////////
		//   |   ___/  |  |  |  | |   _  <  |  |     |  | |  |        ////////////////////////////////////////////////////////////
		//   |  |      |  `--'  | |  |_)  | |  `----.|  | |  `----.   ////////////////////////////////////////////////////////////
		//   | _|       \______/  |______/  |_______||__|  \______|   ////////////////////////////////////////////////////////////
		
		on: /* API */ function() {
			this.element.addClass('x-editable-on x-editable-select');
			this._(updateHTMLFromValue)();

			if(this.options.pluginOptions.options.length > 0)
				this.element.bind('click' + this.namespace(), this._(onElementClick));

			Berta.Editor.prototype.on.call(this);
		},

		off: /* API */ function() {
			if(this.hasFlag(Berta.Editor.flags.EDITING)) {
				this.cancel();
			}
			this.element.removeClass('x-editable-on x-editable-select');
			this.element.unbind('click' + this.namespace());
			
			Berta.Editor.prototype.off.call(this);
		},
		
		edit: /* API */ function() {
			if(this.hasFlag(Berta.Editor.flags.ON) 
				&& !this.hasFlag(Berta.Editor.flags.EDITING) 
				&& !this.hasFlag(Berta.Editor.flags.SAVING)) {
				
				Berta.Editor.prototype.startEditing.call(this);
				
				this._(showPopUp)();
				
				// this type cannot have context variables
				//Berta.Editor.prototype.setPanelContext.call(this);
			}
		},
		
		save: /* API */ function() {
			if(this.hasFlag(Berta.Editor.flags.EDITING)) {
				this._(hidePopUp)();
				this._(updateHTMLFromValue)();
				if(this.value != this.originalValue) this.fireChange();
				
				Berta.Editor.prototype.stopEditing.call(this);
				Berta.Editor.prototype.save.call(this, this._(onSaveComplete));
			}
		},
		
		cancel: /* API */ function() {
			//Berta.Editor.prototype.hidePanelContext.call(this);
			if(this.hasFlag(Berta.Editor.flags.EDITING)) {
				this._(hidePopUp)();
				Berta.Editor.prototype.stopEditing.call(this);
			}
			
			if(this.hasFlag(Berta.Editor.flags.SAVING)) {
				this.saveStop();
			}
			
			this.value = this.originalValue;
			this._(updateHTMLFromValue)();
			this.fireRevert();
			this.cleanup();
		},

		
		cleanup: function() {
			if(this.hasFlag(Berta.Editor.flags.DESTROYING)) {
				this.off();
			}
		},
		
		
		validate: /* override */ function() {
			Berta.Editor.prototype.validate.call(this);
		}

		
	};
	
	
	
	
	//   .______   .______     __  ____    ____  ___   .___________. _______    //////////////////////////////////////////////////
	//   |   _  \  |   _  \   |  | \   \  /   / /   \  |           ||   ____|   //////////////////////////////////////////////////
	//   |  |_)  | |  |_)  |  |  |  \   \/   / /  ^  \ `---|  |----`|  |__      //////////////////////////////////////////////////
	//   |   ___/  |      /   |  |   \      / /  /_\  \    |  |     |   __|     //////////////////////////////////////////////////
	//   |  |      |  |\  \--.|  |    \    / /  _____  \   |  |     |  |____    //////////////////////////////////////////////////
	//   | _|      | _| `.___||__|     \__/ /__/     \__\  |__|     |_______|   //////////////////////////////////////////////////
	
	
	function onElementClick() {
		this.edit();
		//return false;
	}
	
	function onSaveComplete(response) {
		if (response.error) {
			//this.askIfCancelOnSaveErorr(response.errorMessage, this._(this.cancel), this._(this.edit));
			alert(response.errorMessage);
			this.cancel();
			
		} else {
			this.value = response.json.values[this.options.variable];
			this._(updateHTMLFromValue)();

			this.fireSave();

			// update original value after calling the callback, so the callback can distinguish between the two
			this.originalValue = this.value;

			this.cleanup();
		}
	}
	
	
	function showPopUp() {
		var container = $('<div class="x-editable-select-popup"></div>'), i, a,
			pO = this.options.pluginOptions;
		for(i = 0; i < pO.options.length; i++) {
			a = $('<a href="#" class="x-editable-select-item"></a>')
					.attr('title', pO.options[i])
					.html(pO.optionTitles[i] ? pO.optionTitles[i] : pO.options[i])
					.addClass(pO.options[i] == this.value ? 'x-editable-select-item-selected' : '')
					.click(this._(onPopUpLinkClick));
			container.append(a);
		}
		container.appendTo(document.body);
		
		var offset = this.element.offset();
		var contWidth = container.width() + parseInt(container.css('padding-left')) + parseInt(container.css('padding-right'));
		
		container.css('left', offset.left + this.element.width() - contWidth + 5)
				 .css('top', offset.top - container.height() / 2)
				 .mouseleave(this._(onPopUpMouseLeave))
		
		this.popupHTML = container;
	}
	function hidePopUp() {
		if(this.popupHTML) {
			this.popupHTML.remove();
			this.popupHTML = null;
		}
	}
	
	function onPopUpLinkClick(event) {
		var t = $(event.target);
		if(!t.hasClass('x-editable-select-item')) t = t.parents('.x-editable-select-item');
		
		this.value = t.attr('title');
		this.save();
		return false;
	}
	function onPopUpMouseLeave(event) {
		this.cancel();
		return false;
	}




	function updateHTMLFromValue() {
		var pO = this.options.pluginOptions;

		// Can't use Array.indexOf because we need == instead of === comparison
		var oIndex = -1;
		for (var i = 0; i < pO.options.length; i++)
		{
			if (i in pO.options && pO.options[i] == this.value) {	// '==' instead of '==='
				oIndex = i;
				break;
			}
		}

		var value = (pO.optionTitles && pO.optionTitles[oIndex])
						? pO.optionTitles[oIndex]
						: this.value;
		this.element.html(value);
	}
	

}()));



